<template>
	<view style="background-color: #fafafa;">

		<view class="box">
			<img class="img" :src="wp[0].mainPic" alt="">
		</view>



		<view class="box2">


			<view class="box3">
				<view class="rmb">
					<text style="font-size: 25px;">¥</text> {{wp[0].actualPrice}}<text
						class="rmb2">{{wp[0].originalPrice}}</text>
				</view>

				<view class="sm">
					已售{{wp[0].monthSales}}件
				</view>
			</view>


			<view class="box4">

				<view class="bq">
					{{wp[0].dtitle}}
				</view>

				<view class="fx">
					<img class="img" src="../../static/分享.png" alt="">
					<text>分享</text>
				</view>

			</view>
		</view>

		<view class="">

			<view class="wly">
				<img class="img" src="../../static/正确.png" alt=""><text style="margin-left: 6px;">七天无理由退货</text>
				<img class="img" src="../../static/正确.png" alt=""><text style="margin-left: 6px;">48小时发货</text>
			</view>

		</view>
		<view class="xx">
			{{wp[0].desc}}
		</view>

		<view class="box5">

			<view class="gm">
				<text style="margin-left: 30px;" @click="goDetail2()">立即购买</text>
			</view>

			<view class="gm">
				<text style="margin-left: 20px;" @click="goDetail()">领券优惠券</text>
			</view>

			<view class="gwc" @click="gwc()">
				<text style="margin-left: 20px;">加入购物车</text>
			</view>

			<!-- {{name}} -->

		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				wp: [],
				ee:[],
				name: ''
			}
		},
		methods: {
			goDetail() {
				uni.navigateTo({
					url: './lingjuan2?' + "name=" + this.name + "&id=" + this.wp[0].id
				});
			},
			goDetail2() {
				uni.navigateTo({
					url: './xiadan2?' + "name=" + this.name + "&id=" + this.wp[0].id
				});
			},
			gwc() {
				const value = uni.getStorageSync('id');
				uni.setStorageSync('id',this.ee);
				this.ee = value
				// const sl= this.ee.length
				this.ee.push({
						goodsImage: this.wp[0].mainPic,
						price: this.wp[0].actualPrice,
						flag:true,
						num:1,
						size:this.wp[0].dtitle,
					})
					uni.setStorageSync('id', this.ee);
					console.log(this.ee);
					// this.ee.splice()
				// console.log(this.ee);
				uni.showToast({
					title: '加入购物车成功'
				});
			}
		},
		onLoad(option) {
			let that = this
			console.log(option.name);
			that.name = option.name
			uni.request({
				url: "https://openapiv2.dataoke.com/open-api/goods/list-super-goods",
				data: {
					pageId: 1,
					pageSize: 100,
					keyWords: that.name,
					sort: 0,
					type: 0,
					appkey: "622b674f76e31"
				},
				success(res) {
					that.wp = res.data.data.list
					that.wp = that.wp.filter((item) => {
						return item.id == option.id;
					})
					console.log(that.wp)
				},
			})
		}
	}
</script>

<style lang="scss">
	.xx {
		margin: 20px;
		margin-bottom: 50px;
	}
	.box {

		.img {
			width: 100%;
			height: 100%;
		}
	}

	.box2 {
		width: 100%;
		margin-top: 10px;
		background-color: #ffffff;

		.box3 {

			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.rmb {
			margin-top: 15px;
			margin-left: 20px;
			color: #fb3e28;
			font-size: 25px;
		}

		.rmb2 {
			margin-left: 10px;
			font-size: 15px;
			text-decoration: line-through;
			color: #959595;
		}

		.sm {
			margin-top: 15px;
			color: #959595;
			margin-right: 7px;
		}

	}

	.box4 {
		margin-top: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.bq {
			margin-top: 5px;
			margin-left: 15px;
		}

		.fx {
			margin-top: 5px;
			margin-right: 10px;
			display: flex;
			flex-direction: column;
			font-size: 10px;

			.img {

				margin-bottom: 5px;
				width: 20px;
			}
		}
	}

	.wly {
		display: flex;
		align-items: center;
		font-size: 10px;
		margin-top: 10px;

		.img {
			width: 10px;
			margin-left: 16px;
		}
	}

	.box5 {
		position: fixed;
		bottom: 10rpx;
		right: 0;
		// outline: 1px solid red;
		display: flex;
		flex-direction: row-reverse;

		.gwc {
			display: flex;
			align-items: center;
			border-radius: 45px;
			width: 120px;
			height: 40px;
			color: white;
			background-color: #ffa900;
		}

		.gm {
			display: flex;
			align-items: center;
			border-radius: 45px;
			width: 120px;
			height: 40px;
			color: white;
			background-color: #fa2c20;
		}
	}
</style>
